function  rem(){
    document.documentElement.style.fontSize=document.documentElement.clientWidth/6.4+'px';
}
rem()
window.onresize=rem



$(function(){
    document.addEventListener("touchmove", function (e) {
        e.preventDefault()
    }, {
        passive: false
    });

    var box= new IScroll('#box',{
        probeType:2,
    })


    $.ajax({
        type:'get',
        url:'json/index.json',
        success:function(res){
            var arr1=res.banner
            var sban=''
            for(var i in arr1){
                sban+=`
                    <section class="swiper-slide">
                        <img src="${arr1[i].src}" alt="">
                    </section>
                `,
                $('#mybanner>section').html(sban)
                new Swiper('#mybanner')
            }

            var arr2=res.nav
            var snav=''
            for(var i in arr2){
                snav+=`
                    <li>
                        <img src="${arr2[i].src}" alt="">
                        <p>${arr2[i].text}</p>
                    </li>
                `,
                $('.nav>ul').html(snav)
            }

            var arr3=res.list
            var  slist=''
            for(var i in arr3){
                if(i>0){
                    break
                }
                slist+=`
                    <li>
                        <section class="left">
                            <img src="${arr3[i].src}" alt="">
                        </section>
                        <section class="right">
                            <h2>${arr3[i].title}</h2>
                            <p>${arr3[i].text}</p>
                            <span>￥ <mark>${arr3[i].price}</mark>万</span> 
                            <del>${arr3[i].oldprice}</del>
                            <p><span>${arr3[i].num}</span>人购买</p>
                        </section>
                    </li>
                `,
                $('.cars>ul').html(slist)
                box.refresh()
            }
        }
    })

    var index=0
    box.on('scroll',function(){
        Height=$('.refresh').height()
        console.log(Height)
        if(this.y>=Height){
            $('.refresh').html('松开立即释放').addClass('a')
            this.minScrollY=Height
        }
        if(this.y<=box.maxScrollY-Height&&index<3){
            $('.more').html('松开立即释放').addClass('b')
            newH=this.scrollerHeight-this.wrapperHeight
            this.maxScrollY=-newH-Height
        }   
    })

    box.on('scrollEnd',function(){
        if($('.refresh').hasClass('a')){
            $('.refresh').html('leading···')
            setTimeout(function(){
                $('.refresh').html('刷新成功')
            },1500)
            setTimeout(function(){
                box.refresh()
                $('.refresh').html('下拉刷新').removeClass('a')
            },2000)
        }
        if($('.more').hasClass('b')){
            $('.more').html('leading···')
            setTimeout(function(){
                $('.refresh').html('刷新成功')
            },1500)
            setTimeout(function(){
                $('.more').html('上拉加载更多').removeClass('b')

                $.ajax({
                    type:'get',
                    url:'json/index.json',
                    success:function(res){
                        var arr3=res.list
                        var  slist=''
                        index= $('.cars>ul>li').length
                            slist=`
                                <li>
                                    <section class="left">
                                        <img src="${arr3[index].src}" alt="">
                                    </section>
                                    <section class="right">
                                        <h2>${arr3[index].title}</h2>
                                        <p>${arr3[index].text}</p>
                                        <span>￥ <mark>${arr3[index].price}</mark>万</span> 
                                        <del>${arr3[index].oldprice}</del>
                                        <p><span>${arr3[index].num}</span>人购买</p>
                                    </section>
                                </li>
                            `,
                            $('.cars>ul').append(slist)
                            box.refresh()
                            if(index>=2){
                                $('.more').html('到底了')
                                box.maxScrollY=-(box.scrollerHeight-box.wrapperHeight)-Height
                            }else{
                                $('.more').html('上拉加载更多')
                            }
                    }
                })
            },2000)
        }
    })

})